<template>
  <div class="big-ticket-item"  @click="handleClick" v-if="item && item.productName && item.redundancyMinPrice">
    <div class="ticket-banner">
      <image class="ticket-thumb" :src="item.mainImageUrl"/>
      <p class="ticket-desc">{{ item.introduction }}</p>
    </div>
    <view class="ticket-content">
      <p class="ticket-title">{{ item.productName }}</p>
      <div class="ticket-area-distance" v-if="item.distance && showDistance">
        <!-- <p class="ticket-area">{{ item.areaName }}</p> -->
          <!-- <p class="gap">|</p> -->
          <p class="ticket-distance">距离我{{ item.distance | distanceText }}</p>
      </div>
      <div class="time-sell-points">
        <!-- <div class="ticket-time" v-if="item.openingHours">营业时间：{{ item.openingHours }}</div> -->
        <!-- <div class="sell-points">
          <div class="sell-point" v-for="point in item.sellingPoints" :key="point"> <span class="tag-font">&#xe801;</span> {{ point }}</div>
        </div> -->
      </div>
      <!-- 景区级别 -->
      <div class="ticket-tags">
        <tagsItem v-if="item.starLevel" :showIcon="false" :item="item.starLevel + 'A级景区'">
          <view slot="icon"><image class="good-icon" src="/static/good.png"/></view>
        </tagsItem>
        <tagsItem background="rgba(141, 152, 175, 0.1)" color="rgba(141, 152, 175, 1)" v-for="tag in item.tagNames" :item="tag" :key="tag" />
      </div>

      <!-- <div class="ticket-tags">
        <tagsItem background="rgba(141, 152, 175, 0.1)" color="rgba(141, 152, 175, 1)" v-for="tag in item.tagNames" :item="tag" :key="tag" />        
      </div> -->

      <div class="price-wrapper">
        <div class="hot-product">
            <image class="hot-product-icon" src="/static/hot-product.png"/>
        </div>
      </div>
      
        <div class="price-bar">
          <div>            
            <basic-price :price="item.redundancyMinPrice" size="36rpx" :weight="600" unitSize="24rpx" color="#FF5944" unitColor="#FF5944" />
            <span class="sub-text">起</span>
          </div>
        </div>
    </view>

  </div>
</template>

<script>
import layout from './normal-layout'
import tagsItem from './tags-item'

export default {
  name: 'big-ticket-item',
  props: {
    item: { type: Object, default: () => ({}) },
    showDistance: { type: Boolean, default: true }
  },
  components: { 
    layout,
    tagsItem
  },
  methods: {
    handleClick() {
      this.$emit('click', this.item)
      // gotoDetail
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style/iconfont.less";
.sub-text {
  color: @font_light_color;
  font-size: 20rpx;
  font-weight: normal;
  padding-left: 5rpx;
}
.big-ticket-item {
  width: 700rpx;
  border-radius: 18rpx;
  padding: 16rpx;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 18rpx;
  box-sizing: border-box;
  box-shadow: 0px 2px 50px 0px rgba(0, 0, 0, 0.1);

  .ticket-banner {
    margin-bottom: 16rpx;
    width: 100%;
    height: 380rpx;
    position: relative;
    left: 0;
    top: 0;
    border-radius: 8rpx;
    overflow: hidden;

    .ticket-thumb {
      width: 100%;
      height: 380rpx;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 8rpx;
    }

    .ticket-desc {
      .line-ellipsis;

      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0 20rpx;
      color: #fff;
      font-size: 24rpx;
      background-color: rgba(0, 0, 0, 0.5);
      height: 74rpx;
      line-height: 74rpx;
    }
  }

  .ticket-content {
    position: relative;
    left: 0;
    top: 0;

    min-height: 150rpx;
  }

  .price-bar{
    width: 154rpx;
    height: 104rpx; 
    position: absolute;
    right: 0;
    bottom: 0;
    margin-top: 10rpx;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: row;
  }

  .hot-product{      
    width: 154rpx;
    height: 54rpx;   
    position: absolute;
    right: -18rpx;
    top: 0;
    box-sizing: border-box;
    background: linear-gradient(155deg, #F17E4B 0%, #FB6A34 100%);
    border-radius: 200rpx 0 0 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .hot-product-icon {
      width: 120rpx;
      height: 28rpx;
    }
  }      

  .ticket-title {
    font-size: 28rpx;
    color: @font_color;
    font-weight: 600;
    margin-bottom: 8rpx;
  }

  .ticket-tags {
    width: 514rpx;
    margin-top: 8rpx;
    display: flex;
    flex-wrap: wrap;
    .good-icon{
      height: 28rpx;
      width: 28rpx;
      margin-right: 4rpx;
      display: block;
    }
  }

  .ticket-tag {
    .round-tag(32rpx);
    display: inline-flex;
    margin-right: 16rpx;
    background-color: fade(@font_accent_color, 10%);
    color: @font_accent_color;
    text-align: center;
    font-size: 24rpx;
    align-items: center;
    vertical-align: middle;

    .good-icon {
      width: 24rpx;
      height: 24rpx;
      margin-right: 4rpx;
    }
  }

  .ticket-area-distance, .ticket-time {
    content: '.';
    display: 'inline-block';
    font-size: 20rpx;
  }

  .ticket-area-distance {
    font-size: 20rpx;
    color: @font_light_color;
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
    height: 28rpx;
    line-height: 28rpx;
    
    .gap {
      margin-left: 16rpx;
      margin-right: 16rpx;
    }
  }

  .time-sell-points {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .ticket-time {
      font-size: 20rpx;
      width: 500rpx;
      color: @font_light_color;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      // margin-bottom: 10rpx;
      // height: 28rpx;
      line-height: 28rpx;
    }

    .sell-points {
      .flex-1;
      font-size: 0;
      .sell-point {
        .round-tag(28rpx, 8rpx);
        margin-left: 10rpx;

        display: inline-block;
        color: @font_light_color;
        font-size: 20rpx;
        background-color: fade(@font_light_color, 10%);
        text-align: center;
        margin-right: 6rpx;
      }

      .tag-font {
        .iconfont();

        font-size: 20rpx;
        margin-right: 4rpx;
        color: @font_light_color;
      }
    }
  }

  
}


</style>